<template>
    <view class="container" :style="themeColor">
        <view class="main">
            <view class="bg-white">
                <view class="metion-box" v-show="showMetion">
                    <text class="metion">请按要求填写完成信息，才能提高审核通过率</text>
                    <uni-icons class="metion-icon" type="close" @click="showMetion = false"></uni-icons>
                </view>
                <view class="custom-cell">
                    <text class="cell-label"><text class="red">*</text>商家logo</text>
                    <view class="cell-main cell-padding-bottom">
                        <img-item :data="data.Logo" :look="look" @chooseImage="chooseImage1" :num="1"></img-item>
                        <text class="tips">支持gif,jpg,jpeg,bmg,png(建议尺寸200*200)</text>
                    </view>
                </view>
                <view class="custom-cell">
                    <text class="cell-label"><text class="red">*</text>商户名</text>
                    <view class="cell-main"
                        ><input class="cell-input" type="text" v-model="data.ShopName" placeholder="请填写商户名"
                    /></view>
                </view>
                <view class="custom-cell">
                    <text class="cell-label">小程序ID</text>
                    <view class="cell-main"
                        ><input class="cell-input" type="text" v-model="data.MiniAppId" placeholder="请填写小程序ID"
                    /></view>
                </view>
                <view class="custom-cell">
                    <text class="cell-label"><text class="red">*</text>联系人</text>
                    <view class="cell-main"
                        ><input class="cell-input" type="text" v-model="data.ContactName" placeholder="请填写联系人"
                    /></view>
                </view>
                <view class="custom-cell">
                    <text class="cell-label"><text class="red">*</text>联系人电话</text>
                    <view class="cell-main"
                        ><input class="cell-input" type="text" v-model="data.ContactTel" placeholder="请填写联系人电话"
                    /></view>
                </view>

                <view class="custom-cell">
                    <text class="cell-label"><text class="red">*</text>地址</text>
                    <view class="cell-main" @click="areaSelectFn">
                        <text class="cell-value">{{ regionName }}</text>
                        <uni-icons type="arrowright"></uni-icons>
                    </view>
                </view>
                <view class="custom-cell">
                    <text class="cell-label"><text class="red">*</text>详细地址</text>
                    <view class="cell-main">
                        <textarea
                            class="cell-textarea"
                            placeholder="请填写详细地址(街道、楼牌号等)"
                            v-model="data.Address"></textarea>
                        <uni-icons class="icon-location" type="location-filled" size="48" @click="getLoaction">
                        </uni-icons>
                    </view>
                </view>
                <view class="custom-cell">
                    <text class="cell-label"><text class="red">*</text>营业时间</text>
                    <view class="cell-main">
                        <input
                            class="cell-input"
                            type="text"
                            v-model="data.BusinessHours"
                            maxlength="200"
                            placeholder="示例 8:00-20:00" />
                    </view>
                </view>
                <view class="custom-cell">
                    <text class="cell-label"><text class="red">*</text>分类</text>
                    <view class="cell-main" @click="selectCategory">
                        <text class="cell-value">{{ data.CategoryName }}</text>
                        <uni-icons type="arrowright"></uni-icons>
                    </view>
                </view>
                <view class="custom-cell">
                    <text class="cell-label">门头照</text>
                    <view class="cell-main cell-padding-bottom">
                        <img-item :data="data.ShopSignImgs" :look="look" @chooseImage="chooseImage2" :num="9">
                        </img-item>
                        <text class="tips">支持gif,jpg,jpeg,bmg,png(建议尺寸750*370)</text>
                    </view>
                </view>
            </view>
            <view class="custom-cell-1">
                <view class="cell-label">企业介绍</view>
                <view class="">
                    <textarea class="cell-textarea" placeholder="请填写企业介绍" v-model="data.Description"></textarea>
                </view>
            </view>
        </view>

        <view class="bottom-bar">
            <view class="btn btn-success-hollow btn-fill" @click="save"> 提交申请 </view>
        </view>
        <uni-popup ref="areaSelect" type="bottom" background-color="#fff" :safe-area="false">
            <area-select :address-data="data" @pickArea="pickArea"></area-select>
        </uni-popup>
		<privacy-agreement></privacy-agreement>
    </view>
</template>

<script>
import imgItem from "@/pages_me/components/common/img-item.vue"
import areaSelect from "@/uni-sub-base/components/area-select/area-select.vue"
import privacyAgreement from "@/components/privacy-agreement/privacy-agreement.vue"
import { batchSmartParse } from "@/service/api/member.js"
import { ApplyMiniapp, GetMiniappCategoryTree } from "@/service/api/miniApp.js"
import { getLocation } from "@/uni-sub-base/utils/mapUtil.js"
import config from "@/config/config.js"
export default {
    components: {
        imgItem,
        areaSelect,
		privacyAgreement
    },
    data() {
        return {
            showMetion: true,
            look: "0", //商品详情  等于1 查看无法编辑
            data: {
                ShopName: "",
                Logo: "",
                MiniAppId: "",
                ContactName: "",
                ContactTel: "",
                Address: "",
                ProvinceId: 0,
                ProvinceName: "",
                CityId: 0,
                CityName: "",
                AreaId: 0,
                AreaName: "",
                StreetId: 0,
                StreetName: "",
                Longitude: "",
                Latitude: "",
                ShopSignImgs: "",
                Description: "",
                BusinessHours: "",
                CategoryName: "请选择分类",
                CategoryId: 0,
            },
            regionName: "请选择省、市、区",
            categoryList: [],
        }
    },
    onLoad(e) {},
    mounted() {
        this.GetMiniappCategoryTree()
    },
    methods: {
        treeClickEvent(item) {
            if (this.activeId !== item.id) {
                this.resetClass(item)
            }
        },
        resetClass(item, bool = true) {
            const that = this
            that.activeId = item.id
            that.activeName = item.name
        },
        GetMiniappCategoryTree() {
            GetMiniappCategoryTree().then((res) => {
                if (res.State == 1) {
                    this.categoryList = res.Data.children
                }
            })
        },
        //选择图片
        chooseImage1(index, vaule) {
            this.data.Logo = vaule
        },
        //选择图片
        chooseImage2(index, vaule) {
            this.data.ShopSignImgs = vaule
        },

        //保存
        save() {
            //必填值校验
            if (this.data.Logo.trim() == "") {
                this.easyToast("请上传商家Logo")
                return
            }
            if (this.data.ShopName.trim() == "") {
                this.easyToast("请填写商户名")
                return
            }
            if (this.data.ContactName.trim() == "") {
                this.easyToast("请填写联系人")
                return
            }
            if (this.data.ContactTel.trim() == "") {
                this.easyToast("请填写联系电话")
                return
            }
            if (this.data.ContactTel.length < 11) {
                this.easyToast("请正确填写联系电话")
                return
            }
            if (this.regionName == "请选择省、市、区") {
                this.easyToast("请选择省市区")
                return
            }
            if (this.data.Address.trim() == "") {
                this.easyToast("请填写详细地址")
                return
            }
            if (this.data.BusinessHours.trim() == "") {
                this.easyToast("请填写营业时间")
                return
            }
            if (this.data.CategoryId == 0 || this.data.CategoryId == "") {
                this.easyToast("请选择分类")
                return
            }
            // 这里调接口
            ApplyMiniapp(this.data).then((res) => {
                if (res.State == 1) {
                    this.easyToast("提交成功，等待审核")
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        //选择地区
        areaSelectFn() {
            this.$refs.areaSelect.open()
        },

        //选择地区回调
        pickArea(data) {
            this.$refs.areaSelect.close()
            this.data = Object.assign(this.data, data)
            this.getRegionName()
        },
        getRegionName() {
            let line = "-"
            this.regionName = `${this.data.ProvinceName || ""}-${this.data.CityName || ""}${
                this.data.AreaName ? line + this.data.AreaName : ""
            }${this.data.StreetName ? line + this.data.StreetName : ""}`
            // this.data.ProvinceName?this.data.ProvinceName:'' +
            // this.data.CityName?"-"+this.data.CityName:''+
            // this.data.AreaName?"-"+this.data.AreaName:''+
            // this.data.StreetName?"-"+this.data.StreetName:''
        },
        getLoaction() {
            //#ifdef MP-WEIXIN
            this.getCenterLocation()
            //#endif
            //#ifdef APP
            uni.navigateTo({
                url: "/pages_me/packet/map/map-poi",
                events: {
                    getSelectData: (data) => {
                        this.getAppP(data)
                        this.data.Longitude = data.location.longitude
                        this.data.Latitude = data.location.latitude
                        this.data.Address = data.address.replace(/\\/g, "")
                    },
                },
            })
            //#endif
            //#ifdef H5
            getLocation(
                (res) => {
                    if (res) {
                        this.data.Address = res.address.street + res.address.streetNum

                        this.getP(res.address)
                    }
                },
                (err) => {
                    console.log(err)
                },
            )
            //#endif

            // getLocation(res => {
            // 	if (res.address) {
            // 		this.currentDistrict = res.address.district
            // 	}
            // 	//智能识别
            // 	this.getBatchSmartParse(res)
            // }, error => {
            // 	this.currentDistrict = "定位失败"
            // })
        },
        getCenterLocation() {
            var that = this
            wx.authorize({
                scope: "scope.userLocation",
                complete: function (res) {
                    wx.chooseLocation({
                        success(str) {
                            var getAddressUrl ='https://restapi.amap.com/v3/geocode/regeo?output=JSON&location='+str.longitude+','+str.latitude +
                                "&key=" +config.aMapKey.wx
                            wx.request({
                                url: getAddressUrl,
                                success: function (result) {
                                 
									var province = result.data.regeocode.addressComponent.province
									var city = result.data.regeocode.addressComponent.city
									var district = result.data.regeocode.addressComponent.district
									var address = result.data.regeocode.addressComponent.township+result.data.regeocode.addressComponent.streetNumber.street+result.data.regeocode.addressComponent.streetNumber.number
									
                                    that.data.Address = result.data.regeocode.addressComponent.streetNumber.street+result.data.regeocode.addressComponent.streetNumber.number
									that.data.Longitude = str.longitude
									that.data.Latitude = str.latitude
									that.getmapP(
									   result.data.regeocode.addressComponent,
									   address
									)
                                },
                            })
                        },
                    })
                },
            })
        },
        getP(res) {
            let item = {
                ContactAddress: res.street + res.streetNum,
                ProvinceName: res.province,
                CityName: res.city,
                AreaName: res.district,
                StreeName: res.street,
                ContactName: this.data.ContactName || "aaa",
                ContactTel: this.data.ContactTel || "13300000000",
            }
            let list = []
            list.push(item)
            let param = {
                list: list,
            }
            this.batchSmartParse(param)
        },
        getAppP(res) {
            let item = {
                ContactAddress: res.address,
                ProvinceName: res.province,
                CityName: res.city,
                AreaName: res.district,
                ContactName: this.data.ContactName || "aaa",
                ContactTel: this.data.ContactTel || "13300000000",
            }
            let list = []
            list.push(item)
            let param = {
                list: list,
            }
            this.batchSmartParse(param)
        },
        getmapP(res,address) {
            let item = {
                ContactAddress: address,
                ProvinceName: res.province,
                CityName: res.city,
                AreaName: res.district,
                StreetName: res.township,
                ContactName: this.data.ContactName || "aaa",
                ContactTel: this.data.ContactTel || "13300000000",
            }
            let list = []
            list.push(item)
            let param = {
                list: list,
            }
            this.batchSmartParse(param)
        },
        //智能识别
        batchSmartParse(param) {
            batchSmartParse(param).then((res) => {
                if (res.Data && res.Data.list && res.Data.list.length > 0) {
                    let result = res.Data.list[0]
                    this.data.ProvinceId = result.ProvinceId
                    this.data.ProvinceName = result.ProvinceName
                    this.data.CityId = result.CityId
                    this.data.CityName = result.CityName
                    this.data.AreaId = result.AreaId
                    this.data.AreaName = result.AreaName
                    this.data.StreetId = 0
                    this.data.StreetName = ""
                    this.getRegionName()
                }
            })
        },
        selectCategory() {
            uni.navigateTo({
                url:
                    "/pages_me/packet/miniApp/select-category?categoryData=" +
                    JSON.stringify(this.categoryList) +
                    "&id=" +
                    this.data.CategoryId,
                events: {
                    getSelectData: (data) => {
                        if (data) {
                            this.data.CategoryName = data.name
                            this.data.CategoryId = data.id
                            this.$forceUpdate()
                        }
                    },
                },
            })
        },
    },
}
</script>

<style lang="scss">
.container {
    padding-left: 0;
}

.main {
    padding-bottom: 130rpx;
    border-radius: $border-radius-10;
    margin-bottom: constant(safe-area-inset-bottom);
    /*兼容 IOS<11.2*/
    margin-bottom: env(safe-area-inset-bottom);
    /*兼容 IOS>11.2*/
}

.bg-white {
    background: $color-white;
}

.metion-box {
    background: #fdfbec;
    padding: $app-page-padding;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .metion,
    .metion-icon {
        color: #fe6430;
        font-size: 28rpx;
    }
}

.action-bar {
    display: flex;
    flex-direction: column;

    .btn {
        margin-left: 0;
        margin-bottom: 20rpx;
        height: 80rpx;
        font-size: 32rpx;
    }
}

.custom-cell {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 36rpx $app-page-padding;
    padding-left: 0;
    margin-left: $app-page-padding;
    border-bottom: solid 1rpx $uni-bg-color-grey;

    &:last-child {
        border-bottom: 0;
    }

    .cell-label {
        display: flex;
        flex: 1;
        font-size: 30rpx;
    }

    .cell-main {
        display: flex;
        flex: 3;
        overflow: hidden;

        .cell-value {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: $app-color-text-desc;
            font-size: $font-size-28;
        }

        .cell-input {
            color: $app-color-text-desc;
            font-size: $font-size-28;
        }
    }

    .cell-textarea {
        height: 100rpx;
        color: $app-color-text-desc;
        font-size: $font-size-28;
    }

    .icon-location {
        padding: $app-page-padding;
        margin-right: -$app-page-padding;
    }
}

.custom-cell-1 {
    padding: 0 $app-page-padding 30rpx;
    background: $color-white;
    margin-top: $app-page-padding;

    .cell-label {
        color: $app-color-text-desc;
        font-size: $font-size-30;
        padding: 30rpx 0;
    }

    .cell-textarea {
        height: 360rpx;
        width: 100%;
        box-sizing: border-box;
        padding: $app-page-padding;
        color: $app-color-text-desc;
        font-size: $font-size-28;
        background: #f5f5f5;
    }
}

.card-cell {
    margin-bottom: 40rpx;
}

.cell-switch {
    transform: scale(0.8);
}

.red {
    color: #ef1f1f;
    padding-right: 4rpx;
}

.cell-padding-bottom {
    padding-bottom: 30rpx;
    position: relative;
}

.tips {
    display: block;
    position: absolute;
    bottom: 0;
    font-size: 20rpx;
    color: #cccccc;
}

.bottom-bar {
    .btn {
        text-align: center;
        line-height: 86rpx;
        height: 86rpx;
        font-size: 32rpx;

        &:first-child {
            margin-left: 0;
        }
    }

    .btn-batch {
        flex: 1;
        border: solid 1rpx $color-black-1;
    }

    .btn-addCart {
        flex: 3;
    }
}

.cell-main-gray {
    color: #999;
}
</style>
